<template>
  <div class="room-list-wrap" style="display: flex; flex-direction: column; height: 100%">
    <tabs-group
      v-model="cell_id"
      :data-list="cellList"
      :replace-fields="{ label: 'text', value: 'id' }"
      style="flex: none; padding: 0"
    />
    <a-radio-group v-model:value="dwellingState" style="flex: none; padding: 15px">
      <a-radio-button v-for="item of radioList" :value="item.flag"
        ><span v-html="radioGroupFormat(item)"></span
      ></a-radio-button>
    </a-radio-group>
    <room-living-type-count v-model="livingType" style="flex: none; width: 100%; padding: 0 15px 14px" />
    <room-list
      v-model="roomId"
      :cell-id="cell_id"
      :living-type="livingType"
      :dwelling-state="dwellingState"
      style="flex: auto; height: auto; min-height: auto; overflow: hidden auto"
      @change="onRoomChange"
    />
  </div>
</template>

<script>
import debounce from 'lodash-es/debounce.js';
import { realityHouseCountStatistics } from '@gis/lib/api';
import TabsGroup from '@gis/lib/components/tabs-group.vue';
import areaCodeMixin from '@gis/lib/mixins/areaCodeMixin.js';
import RoomList from './room-list.vue';
import { colorEnum } from '../assets/enum.js';
import RoomLivingTypeCount from '../../house-list/components/room-living-type-count.vue';

export default {
  name: 'room-list-wrap',
  components: { TabsGroup, RoomList, RoomLivingTypeCount },
  mixins: [areaCodeMixin],
  props: {
    modelValue: { type: String, default: '' }, //房间
    yardId: { type: String, default: '' }, //小区
    cellId: { type: String, default: '' }, //单元
    cellList: { type: Array, default: () => [] }, //单元
    radioTypes: { type: Array, default: undefined }, //单选类型
  },
  data() {
    return {
      colorEnum,
      dwellingState: '',
      houseTypeList: [],
      livingType: [],
      roomId: '',
      cell_id: '',
    };
  },
  computed: {
    paramsData() {
      return Object.assign({}, this.apiParams, {
        yard_id: this.yardId,
        cell_id: this.cell_id,
        type: 1,
      });
    },
    radioList() {
      const total = this.houseTypeList.reduce((res, item) => {
        return res + item.value;
      }, 0);
      const handler = (item) => {
        return Object.assign({}, item, {
          // name: `${item.name}(${item.value})`,
          name: item.name,
        });
      };
      let filter = handler;
      if (this.radioTypes && this.radioTypes.length) {
        filter = (item) => {
          return this.radioTypes.includes(item.flag) ? handler(item) : null;
        };
      }
      const dftRadio = [{ flag: '', name: '所有', value: total }];
      const list = [].concat([], dftRadio, this.houseTypeList).reduce((res, item) => {
        const data = filter(item);
        return data ? res.concat([data]) : res;
      }, []);
      // this.$set(this, 'dwellingState', (list[0] && list[0].flag) || '');
      return list;
    },
  },
  watch: {
    modelValue: {
      immediate: true,
      handler(id) {
        this.roomId = id;
      },
    },
    cellId: {
      immediate: true,
      handler(id) {
        this.cell_id = id;
      },
    },
    paramsData: {
      immediate: true,
      deep: true,
      handler: debounce(function (newVal) {
        this.getTypeData(newVal);
      }),
    },
  },
  methods: {
    onRoomChange(id) {
      this.$emit('update:modelValue', id);
    },
    radioGroupFormat(data) {
      return data.flag
        ? `<span style="width: 5px;height: 5px;display: inline-block;margin: 0 5px 2px 0;border-radius: 50%;background: ${
            this.colorEnum[data.flag]
          };"></span>${data.name}`
        : data.name;
    },
    async getTypeData(params) {
      if (!params.area_code) return;
      const { data = [] } = await realityHouseCountStatistics(params);
      /*
       * {flag: "D0003_1", num: 154, dic_value: "空闲", name: "空闲", value: 154}
       * {flag: "D0003_2", num: 547, dic_value: "自住", name: "自住", value: 547}
       * {flag: "D0003_3", num: 623, dic_value: "出租", name: "出租", value: 623}
       * {flag: "D0003_8", num: 0, dic_value: "网约房", name: "网约房", value: 0}
       * {flag: "D0003_9", num: 1, dic_value: "商用", name: "商用", value: 1}
       * */
      this.houseTypeList = data;
    },
  },
};
</script>

<style lang="less">
.room-list-wrap {
  height: 100%;
  overflow: hidden auto;
  .ant-tabs {
    &.ant-tabs-top {
      .ant-tabs-nav {
        margin: 0;
        .ant-tabs-nav-wrap {
          .ant-tabs-nav-list {
            .ant-tabs-tab {
              padding: 14px;
            }
          }
        }
      }
    }
  }
  .radio-group {
    padding: 10px 15px;
    .ant-radio-button-wrapper {
      padding: 0 6px;
    }
  }
}
</style>
